<template>
	<view class="container">
		<view class="top-container">
			<!-- 登录后的退出按钮 -->
			<image class="bg-img" src="/static/icon/ui/user/icon_bg.jpg"></image>
			<view @tap="logout_modal_show()" class="logout" hover-class="opcity" :hover-stay-time="150">
				<image class="logout-img" src="/static/icon/ui/user/icon_out.png" v-show="is_login"></image>
				<text class="logout-txt" v-show="is_login">退出</text>
			</view>
			<!-- 没有登录的状态 -->
			<view v-show="!is_login" class="user-wrapper" @click="login">
				<navigator url="../../pages/user/signIn/signIn" hover-class="opcity" :hover-stay-time="150"
					class="user">
					<image class="avatar-img" src="/static/icon/ui/user/avatar/0.png"></image>
					<text class="user-info-mobile">请登录</text>
				</navigator>
			</view>
			<!-- 登录后的头像和昵称 -->
			<view v-show="is_login" class="user">
				<image class="avatar-img" :src="user_data.avatar_src" @click="userInfo()"></image>
				<view class="user-info-mobile" @click="userInfo()">
					<text>{{ user_data.nick }}</text>
				</view>
			</view>
		</view>

		<!-- 订单和钱包 -->
		<view class="middle-container">
			<view v-if="config.order" @tap="tapEvent('order')" class="middle-item" hover-class="opcity"
				:hover-stay-time="150">
				<image class="ticket-img" src="/static/icon/ui/user/order.png"></image>
				<text class="middle-tag">订单</text>
			</view>
			<view v-if="config.wallet" @tap="tapEvent('wallet')" class="middle-item" hover-class="opcity"
				:hover-stay-time="150">
				<image class="car-img" src="/static/icon/ui/user/wallet.png"></image>
				<text class="middle-tag">钱包</text>
			</view>
		</view>

		<view class="bottom-container">
			<view class="ul-item">
				<view v-if="config.subscribe" @tap="tapEvent('subscribe')" class="item" hover-class="opcity"
					:hover-stay-time="150">
					<image class="item-img" src="/static/icon/ui/user/subscribe.png"></image>
					<text class="item-name">关注</text>
				</view>
				<view v-if="config.follow" @tap="tapEvent('follow')" class="item" hover-class="opcity"
					:hover-stay-time="150">
					<image class="item-img" src="/static/icon/ui/user/follow.png"></image>
					<text class="item-name">粉丝</text>
				</view>
				<view v-if="config.visitor" @tap="tapEvent('visitor')" class="item" hover-class="opcity"
					:hover-stay-time="150">
					<image class="item-img" src="/static/icon/ui/user/visitor.png"></image>
					<text class="item-name">访客</text>
				</view>
				<view v-if="config.footprint" @tap="tapEvent('footprint')" class="item" hover-class="opcity"
					:hover-stay-time="150">
					<image class="item-img" src="/static/icon/ui/user/footprint.png"></image>
					<text class="item-name">足迹</text>
				</view>
			</view>
			<view class="ul-item">
				<view v-if="config.appreciate" @tap="tapEvent('appreciate')" class="item" hover-class="opcity"
					:hover-stay-time="150">
					<image class="item-img" src="/static/icon/ui/user/appreciate.png"></image>
					<text class="item-name">赞赏</text>
				</view>
				<view v-if="config.feedback" @tap="tapEvent('feedback')" class="item" hover-class="opcity"
					:hover-stay-time="150">
					<image class="item-img" src="/static/icon/ui/user/feedback.png"></image>
					<text class="item-name">反馈</text>
				</view>
				<view v-if="config.apply" @tap="tapEvent('apply')" class="item" hover-class="opcity"
					:hover-stay-time="150">
					<image class="item-img" src="/static/icon/ui/user/apply.png"></image>
					<text class="item-name">申请</text>
				</view>
				<view v-if="config.setting" @tap="tapEvent('setting')" class="item" hover-class="opcity"
					:hover-stay-time="150">
					<image class="item-img" src="/static/icon/ui/user/setting.png"></image>
					<text class="item-name">设置</text>
				</view>
			</view>
		</view>

		<view v-if="config.about" class="tui-applets__vip" @tap="aboutOur(true)">
			<tui-icon name="satisfied" color="#ff2121" :size="44" unit="rpx"></tui-icon>
			<text>关于我们</text>
		</view>
		<tui-modal :show="about_modal" @click="aboutOur(false)" @cancel="aboutOur(false)" content="我是一个毕业设计，@Alice"
			color="#333" :size="32"></tui-modal>
		<tui-modal :show="exit_modal" @click="logout_modal" @cancel="logout_modal_hide" content="确定退出登录吗？" color="#333"
			:size="32"></tui-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				about_modal: false,
				exit_modal: false,
				is_login: true,
				config: {
					order: true, // 订单
					wallet: true, // 钱包
					subscribe: true, // 关注
					follow: true, // 粉丝
					visitor: true, // 访客
					footprint: true, // 足迹
					appreciate: true, //赞赏
					feedback: true, // 反馈
					apply: true, // 申请
					setting: true, // 设置
					about: true // 关于
				},
				user_data: {
					avatar_src: '/static/icon/ui/user/avatar/1.png',
					nick: '手心的蔷薇'
				},
			};
		},
		onLoad() {

		},
		onShow: function() {

		},
		methods: {
			loadData: function() {
				this.is_login = false;
				this.login_info = this.checkLogin('index', 'my');
				console.debug('查询是否登录' + this.login_info);
				if (this.login_info) {
					this.is_login = true;
					var token = this.login_info[0];
					console.debug('token:' + token);
					console.debug('加载我的数据');
					uni.request({
						url: this.httpRoot + 'my',
						method: 'GET',
						header: {
							"token": token
						},
						success: res => {
							console.debug(res);
							console.debug(res.data);
							var code = 0;
							var data = {};
							var message = '';
							if ('code' in res.data) {
								code = res.data.code;
							}
							if ('message' in res.data) {
								message = res.data.message;
							}
							if ('data' in res.data) {
								data = res.data.data;
								// data = res.data.data.parseJSON(); //由JSON字符串转换为JSON对象
								// data = JSON.parse(res.data.data);
								console.debug('数据：');
								console.debug(data);
								if ('config' in data) {
									this.config = data.config;
									console.debug(data.config)
								}
								if ('user_data' in data) {
									this.user_data = data.user_data;
									console.debug('头像地址' + this.user_data.avatar_src)
								}
							} else {
								uni.showToast({
									title: '服务器错误',
									icon: 'none'
								});
							}
							if (message != '') {
								uni.showToast({
									title: message,
									icon: 'none'
								});
							}
						},
						fail: () => {
							uni.showModal({
								title: '请求数据失败'
							});
						},
						complete: () => {

						}
					});
				}
			},
			login() {
				console.debug('登录');
				uni.navigateTo({
					url: '../../pages/user_login/user_login'
				});
			},
			aboutOur(e) {
				this.about_modal = e;
			},
			tapEvent(name) {
				if (this.is_login == false) {
					uni.showToast({
						title: '请登录',
						icon: 'none'
					});
					return;
				}
				console.debug('点击了：' + name);
				if (name == 'order') {
					console.debug('我的订单');
					uni.navigateTo({
						url: '../../pages/order_list/order_list?action=history'
					});
				} else if (name == 'wallet') {
					console.debug('我的钱包');
					uni.navigateTo({
						url: '../../pages/wallet/wallet'
					});
				} else if (name == 'setting') {
					console.debug('设置');
					uni.navigateTo({
						url: '../../pages/user_setting/user_setting'
					});
				} else if (name == 'subscribe' || name == 'follow' || name == 'visitor' || name == 'footprint') {
					console.debug('用户');
					uni.navigateTo({
						url: '../../pages/user_list/user_list?action=' + name
					});
				} else if (name == 'appreciate') {
					console.debug('赞赏');
					uni.navigateTo({
						url: '../../pages/user_appreciate/user_appreciate'
					});
				} else if (name == 'feedback') {
					console.debug('反馈');
					uni.navigateTo({
						url: '../../pages/user_feedback/user_feedback'
					});
				} else if (name == 'apply') {
					console.debug('申请');
					uni.navigateTo({
						url: '../../pages/user_apply/user_apply'
					});
				}
			},
			logout_modal(e) {
				let index = e.index;
				if (index === 0) {
					// 取消退出
				} else {
					// 确定退出
					console.debug('退出登录');

					try {
						uni.clearStorageSync();
					} catch (e) {
						// error
					}

					this.is_login = false;
				}
				this.logout_modal_hide();
			},
			logout_modal_hide() {
				this.exit_modal = false;
			},
			logout_modal_show() {
				this.exit_modal = true;
			},
			userInfo() {
				uni.navigateTo({
					url: '../../pages/user_info/user_info'
				})
			}
		}
	};
</script>

<style>
	.container {
		position: relative;
		padding-bottom: 100rpx;
	}

	.top-container {
		height: 440rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 440rpx;
	}

	.logout {
		width: 110rpx;
		height: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 42rpx 0 24rpx 32rpx;
		position: relative;
		z-index: 2;
	}

	.logout-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 11rpx;
	}

	.logout-txt {
		font-size: 28rpx;
		color: #fefefe;
		line-height: 28rpx;
	}

	.user-wrapper {
		display: flex;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.user {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.avatar-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		align-self: center;
	}

	.user-info {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		align-items: center;
	}

	.user-info-mobile {
		margin-top: 30rpx;
		position: relative;
		font-size: 28rpx;
		color: #fefefe;
		line-height: 28rpx;
		align-self: center;
		padding: 0 50rpx;
	}

	.edit-img {
		position: absolute;
		width: 42rpx;
		height: 42rpx;
		right: 0;
		bottom: -4rpx;
	}

	.edit-img>image {
		width: 42rpx;
		height: 42rpx;
		padding-left: 25rpx;
	}

	.middle-container {
		height: 138rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 10rpx;
		background-color: #ffffff;
		margin: -30rpx 30rpx 26rpx 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-shadow: 0 15rpx 10rpx -15rpx #efefef;
		position: relative;
		z-index: 2;
	}

	.middle-item {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ticket-img {
		width: 80rpx;
		height: 80rpx;
		margin-left: 65rpx;
	}

	.middle-tag {
		font-size: 28rpx;
		color: #333333;
		line-height: 28rpx;
		font-weight: bold;
		padding-left: 22rpx;
	}

	.car-img {
		width: 80rpx;
		height: 80rpx;
		margin-left: 97rpx;
	}

	.bottom-container {
		height: 334rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40rpx 74rpx 40rpx 95rpx;
		margin: 0 30rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10rpx #efefef;
	}

	.ul-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.item-img {
		width: 64rpx;
		height: 64rpx;
	}

	.item-name {
		padding-top: 13rpx;
		font-size: 24rpx;
		color: #666666;
		min-width: 80rpx;
		text-align: center;
	}

	.btn-feedback {
		background: transparent !important;
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		border: 0;
	}

	.btn-feedback::after {
		border: 0;
	}

	.tui-applets__vip {
		width: 100%;
		position: fixed;
		bottom: 80px;
		/* #ifdef H5 */
		bottom: 80px;
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
		z-index: 10;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #586c94;
	}

	.tui-applets__vip text {
		padding-left: 10rpx;
	}
</style>
